import React from 'react';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import { Layout, Spin, message } from 'antd';
import styles from './BasicLayout.css';
import SideBar from './components/SideBar';
import Player from './components/Player';

const { Header, Footer, Sider, Content } = Layout;

export const SIDE_BAR_WIDTH = 260;
export default function (props) {
    return (
        <>
            <PersistGate
                persistor={persistStore(window.g_app._store)}
                loading={
                    <div className={styles.spin}>
                        <Spin size='large' />
                    </div>
                }
            >
                <Layout className={styles.container}>
                    <Sider className={styles.sider} width={SIDE_BAR_WIDTH}>
                        <SideBar {...props} />
                    </Sider>
                    <footer className={styles.playerWrap}>
                        <Player />
                    </footer>
                </Layout>
            </PersistGate>
        </>
    )
}
